<template>
    <div class="file-content">
        <div>
            <h1>词库列表</h1>
            <div class="btn-box">
				<el-button type="primary" @click="addFun">新增上传词库</el-button>
                <!-- <button type="button" class="btn btn-link" download a>下载模板</button> -->
                <a href="https://wutianci.top/上传模板.xlsx" download="上传模板.xlsx">下载模板</a>
            </div>
        </div>
		<el-table
		    :data="dataList"
		    border
		    style="width: 100%">
		    <el-table-column
		      fixed
		      type="index"
		      label="#"
		      width="150">
		    </el-table-column>
		    <el-table-column
		      prop="wordName"
		      label="词库名称"
		      width="120">
		    </el-table-column>
			<el-table-column
			  prop="fileName"
			  label="文件名称"
			   width="320">
			</el-table-column>
		    <el-table-column
		      fixed="right"
		      label="操作">
		      <template #default="{row}">
				  <el-button type="primary" @click="EditFun(row)">重新上传</el-button>
				  <el-button type="danger" @click="EditFun(row, 'delete')">删除</el-button>
		      </template>
		    </el-table-column>
		  </el-table>
		<el-dialog
		  title="词库"
		  v-model="centerDialogVisible"
		  width="60%"
		  center>
		  <el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="词库名称">
					<el-input v-model="requestForm.wordName"></el-input>
				</el-form-item>
				<el-form-item label="上传文件">
					<el-upload
						style="width: 200px"
						class="upload-demo"
						ref="upload"
						limit="1"
						:multiple="false"
						:file-list="exfileList"
						:auto-upload="false">
						<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
					</el-upload>
				</el-form-item> 
				<el-form-item>
					<el-button type="primary" @click="uploadFun">上传</el-button>
					<el-button @click="() => centerDialogVisible = !centerDialogVisible">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const dataList = ref([])
const exfileList = ref([])
const centerDialogVisible = ref(false)
const requestForm = ref({
    title: '新增上传词库',
    fileName: ''
})

const getFileList = () => {
    $axios.request({
        method: 'GET',
        url: '/jsonData/fileList.json'
    }).then(res => {
        dataList.value = res.data || []
   })
    
}
const addFun = () => {
    requestForm.value.title = "新增上传词库"
    requestForm.value.id = ""
    requestForm.value.wordName = ""
    requestForm.value.fileName = ""

    centerDialogVisible.value= true
}
const EditFun = (item, type) => {
    if (type == 'delete') {
        const formData = new FormData();
        formData.append('wordName', item.wordName);
        formData.append('id', item.id);
        $axios.post('/api/fileDelete', formData, {
                params: {
                    wordName: item.wordName ||'',
                    id: item.id ||'',
                },
                headers: {
                    'Content-Type': 'multipart/form-data' // 不设置Content-Type，让浏览器自动设置
                }
            })
            .then(res => {
                if (res.status == 200) {
                    getFileList()
                }
            })
            .catch(error => {
                console.error('文件上传失败:', error);
            });
        
    } else {
        requestForm.value.title = "重新上传词库"
        requestForm.value.wordName = item.wordName || ""
        requestForm.value.fileName = item.fileName || ""
        requestForm.value.id = item.id || ""
        myModal.value.show()
    }
}
const uploadFun = () => {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0]; // 获取文件对象
    if (fileInput.files && fileInput.files.length > 0) {
        const reader = new FileReader();
        reader.readAsArrayBuffer(file); // 读取文件内容为ArrayBuffer
        reader.onloadend = function() {
            const arrayBuffer = reader.result; // 获取ArrayBuffer数据
            const blob = new Blob([arrayBuffer], { type: file.type }); // 转换为Blob对象
            const formData = new FormData();
            formData.append('excelFile', blob, file.name);
            formData.append('wordName', requestForm.value.wordName);
            formData.append('id', requestForm.value.id);
            $axios.post('/api/upload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data' // 不设置Content-Type，让浏览器自动设置
                }
            })
            .then(res => {
                if (res.status == 200) {
                    getFileList()
                    myModal.value.hide()
                }
            })
            .catch(error => {
                console.error('文件上传失败:', error);
            });
        };
    } else {
        alert('选择上传文件')
    }
}
    
onMounted(() => {
    getFileList();
    // myModal.value = new bootstrap.Modal(document.getElementById('exampleModal'), {
    //     keyboard: false,
    //     backdrop: 'static'
    // });
    
})
</script>
<style lang="less" scoped>
.file-content {
    .btn-box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 20px 0;
    }
}
</style>